<!-- 页面 -->
<template>
  <view class="ss-user-info-wrap ss-p-t-50">
    <view class="ss-flex ss-col-center ss-row-between ss-m-b-20">
      <view class="left-box ss-flex ss-col-center ss-m-l-36">
        <view class="avatar-box ss-m-r-24">
          <image
            class="avatar-img"
            :src="
              isLogin
                ? sheep.$url.cdn(userInfo.avatar)
                : sheep.$url.static('/assets/addons/shopro/uniapp/default_avatar.png')
            "
            mode="aspectFill"
            @tap="sheep.$router.go('/pages/user/info')"
          ></image>
        </view>
        <view>
          <view class="nickname-box ss-flex-col">
            <view class="nick-name ss-flex ss-m-r-20">
              {{ userInfo?.nickname || nickname }}
              <view class="vip-tag" v-if="userInfo?.egg_vip">鸡蛋会员</view>
            </view>
            <view class="vip-time" v-if="userInfo?.egg_vip">
              会员时间：{{ dayjs(userInfo.egg_vip_start_time).format("YYYY-MM-DD") }}至{{ dayjs(userInfo.egg_vip_end_time).format("YYYY-MM-DD") }}</view>
          </view>
        </view>
      </view>
      <view class="right-box">
        <view class="buy-btn" @tap="onBuy">{{userInfo?.egg_vip == 1 ? '立即续费' : '立即购买'}}</view>
      </view>
    </view>

    <view
      class="bind-mobile-box ss-flex ss-row-between ss-col-center"
      v-if="isLogin && !userInfo.verification?.mobile"
    >
      <view class="ss-flex">
        <text class="cicon-mobile-o"></text>
        <view class="mobile-title ss-m-l-20"> 点击绑定手机号确保账户安全 </view>
      </view>
      <button class="ss-reset-button bind-btn" @tap="onBind">去绑定</button>
    </view>
  </view>
</template>

<script setup>
  /**
   * 用户卡片
   *
   * @property {Number} leftSpace 									- 容器左间距
   * @property {Number} rightSpace 									- 容器右间距
   *
   * @property {String} avatar 					- 头像
   * @property {String} nickname 					- 昵称
   * @property {String} vip		  				- 等级
   * @property {String} collectNum 				- 收藏数
   * @property {String} likeNum 					- 点赞数
   *
   *
   */
  import { computed, reactive } from 'vue';
  import sheep from '@/sheep';
  import dayjs from "dayjs";
  import { showAuthModal } from '@/sheep/hooks/useModal';

  // 用户信息
  const userInfo = computed(() => sheep.$store('user').userInfo);

  // 是否登录
  const isLogin = computed(() => sheep.$store('user').isLogin);
  // 接收参数
  const props = defineProps({
    background: {
      type: String,
      default: '',
    },
    // 头像
    avatar: {
      type: String,
      default: '',
    },
    nickname: {
      type: String,
      default: '请先登录',
    },
    vip: {
      type: [String, Number],
      default: '1',
    },
    collectNum: {
      type: [String, Number],
      default: '1',
    },
    likeNum: {
      type: [String, Number],
      default: '1',
    },
  });

  function onBind() {
    showAuthModal('changeMobile');
  }

  // 购买会员
  function onBuy() {
    console.log('购买会员');
    sheep.$router.go('/pages/user/member');
  }
</script>

<style lang="scss" scoped>
  .ss-user-info-wrap {
    box-sizing: border-box;

    .avatar-box {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      overflow: hidden;

      .avatar-img {
        width: 100%;
        height: 100%;
      }
    }

    .nick-name {
      font-size: 34rpx;
      color: #333333;
      line-height: normal;
    }

    .vip-img {
      width: 30rpx;
      height: 30rpx;
    }
    .vip-tag {
      display: inline-block;
      height: 30rpx;
      background: linear-gradient(180deg,#E6C284 0%, #EACFA2 100%);
      border-radius: 15rpx;
      font-size: 20rpx;
      color: #ffffff;
      line-height: 30rpx;
      margin-left: 10rpx;
      padding: 0 10rpx;
    }
    .vip-time {
      color: #252525;
      font-size: 18rpx;
      line-height: 44rpx;
    }
    .right-box {
      margin-right: 20rpx;
      .buy-btn {
        color: #E9CB98;
        font-size: 20rpx;
        line-height: 40rpx;
        text-align: center;
        width: 120rpx;
        height: 40rpx;
        border-radius: 80rpx;
        background-color: #252525;
      }
    }
  }

  .bind-mobile-box {
    width: 100%;
    height: 84rpx;
    padding: 0 34rpx 0 44rpx;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0px -8rpx 9rpx 0px rgba(#e0e0e0, 0.3);

    .cicon-mobile-o {
      font-size: 30rpx;
      color: #ff690d;
    }

    .mobile-title {
      font-size: 24rpx;
      font-weight: 500;
      color: #ff690d;
    }

    .bind-btn {
      width: 100rpx;
      height: 50rpx;
      background: #ff6100;
      border-radius: 25rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #ffffff;
    }
  }
</style>
